import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Suspense } from 'react'
// 引入重置样式表,帮助你清除一下 默认的标签样式 margin padding ... 
import 'normalize.css';

import { BrowserRouter as Router } from 'react-router-dom'
// 导入仓库
// import store from '@/store/index'
import { persistor, store } from '@/store';
import { PersistGate } from 'redux-persist/integration/react'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Router>
    {/* 
       suspense 当陆游与匹配的组件还没有加载出来的时候, 显示 Suspense中的fallBack 对应的组件
       suspense :表示加载的意思, 配合 lazy 使用
    
    */}
    <Suspense fallback={<div>loading.....</div>}>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </Suspense>
  </Router>
);
